import React from 'react';
import { inject, observer } from 'mobx-react';
import { RouterStore } from 'mobx-react-router';
import { WeaTableNew } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
import allStores from '../stores/index';
import {
  WeaTop,
  WeaTab,
  WeaLeftTree,
  WeaLeftRightLayout,
  WeaSearchGroup,
  WeaRightMenu,
  WeaPopoverHrm,
  WeaErrorPage,
  WeaTools,
  WeaLocaleProvider,
} from 'ecCom';
import {
  Button, Form, Modal,
}
  from 'antd';
import Immutable from 'immutable';
import forEach from 'lodash/forEach';
import isEmpty from 'lodash/isEmpty';
import CarConstant from '../util/CarConstant';
import * as CarUtil from '../util/CarUtil';
import { toJS } from 'mobx';
import CarViewDialog from './car/dialog/CarViewDialog';

const getLabel = WeaLocaleProvider.getLabel;
const confirm = Modal.confirm;
const is = Immutable.is;
const createForm = Form.create;
const FormItem = Form.Item;

/**
 * 车辆申请审批
 */
@inject('carFlowListStore')
@observer
class CarFlowList extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { carFlowListStore } = this.props;

    carFlowListStore.doTableLoading(); // 初始化列表
    carFlowListStore.initConditionDatas(); // 初始化高级搜索区域
  }

  componentWillReceiveProps(nextProps) {
  }

  componentWillUnmount() {
    // 组件卸载时一般清理一些状态
    const { carFlowListStore } = this.props;

    carFlowListStore.setShowSearchAd(false);
    carFlowListStore.setSelectedKey('all');
    carFlowListStore.clearFormFields();
  }

  render() {
    const { carFlowListStore } = this.props;
    const { loading, form, conditioninfo, topTab, selectedKey, showSearchAd, sessionkey, tableStore } = carFlowListStore;

    return (
      <div className="wea-car-mine">
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ltt1sw`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}>
          <WeaTop
            ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@4bqn1m`}
            title={getLabel(19019, '车辆申请审批')}
            loading={loading}
            icon={CarConstant.icon}
            iconBgcolor={CarConstant.iconBgColor}
            buttonSpace={10}
            showDropIcon
            dropMenuDatas={this.getRightMenu()}
            onDropMenuClick={this.onRightMenuClick.bind(this)}
            buttons={[]}
          >
            <WeaTab
              ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@pu9fef`}
              datas={topTab}
              keyParam="groupid"
              onChange={this.changeTab.bind(this)}
              selectedKey={selectedKey}
              searchType={['base', 'advanced']}
              searchsBaseValue={form.isFormInit && form.getFormParams() && form.getFormParams().requestname}
              setShowSearchAd={(bool) => { carFlowListStore.setShowSearchAd(bool); }}
              showSearchAd={showSearchAd}
              hideSearchAd={() => { carFlowListStore.setShowSearchAd(false); }}
              searchsAd={CarUtil.getSearchs(form, conditioninfo, this.refreshAd)}
              buttonsAd={this.getTabButtonsAd()}
              onSearch={(v) => { carFlowListStore.doTableLoading(); }}
              onSearchChange={(v) => { carFlowListStore.appendFormFields({ requestname: v }); }}
            />
            <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@wbjxcz`} />
            <WeaTable
              ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@62luqs`}
              loading={loading}
              comsWeaTableStore={tableStore}
              sessionkey={sessionkey}
              hasOrder
              needScroll={false}
              getColumns={this.getNewColumns}
            />
          </WeaTop>
        </WeaRightMenu>
        <CarViewDialog ecId={`${this && this.props && this.props.ecId || ''}_CarViewDialog@kht6xy`} ref="carview" />
      </div>
    );
  }

	carview = (id) => {
	  this.refs.carview.wrappedInstance.open(id);
	}

	// 切换tab事件
	changeTab(theKey) {
	  const { carFlowListStore } = this.props;

	  carFlowListStore.setSelectedKey(theKey);
	  carFlowListStore.setShowSearchAd(false);
	  carFlowListStore.clearFormFields();
	  carFlowListStore.doTableLoading();
	}

	// 右键菜单
	getRightMenu() {
	  const btns = [];
	  btns.push({ key: 'search', icon: <i className="icon-coms-search" />, content: getLabel(197, '搜索') });
	  // btns.push({ key: "collection", icon: <i className='icon-coms-Custom'/>, content: '收藏' });
	  // btns.push({ key: "help", icon: <i className='icon-coms-Custom'/>, content: '帮助' });
	  return btns;
	}

	// 右键菜单事件绑定
	onRightMenuClick(key) {
	  const { carFlowListStore } = this.props;
	  if (key == 'search') {
	    carFlowListStore.setShowSearchAd(false);
	    carFlowListStore.doTableLoading();
	  }
	}

	// 高级搜索底部按钮定义
	getTabButtonsAd() {
	  const { carFlowListStore } = this.props;
	  return [
	    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tjt6wy@refreshAd`} type="primary" onClick={() => { this.refreshAd(); }}>{getLabel(197, '搜索')}</Button>),
	    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@b8xz14@reset`} type="ghost" onClick={() => { carFlowListStore.clearFormFields(); }}>{getLabel(2022, '重置')}</Button>),
	    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@p7kc7c@cancel`} type="ghost" onClick={() => { carFlowListStore.setShowSearchAd(false); }}>{getLabel(201, '取消')}</Button>),
	  ];
	}

	refreshAd = () => {
	  const { carFlowListStore } = this.props;
	  carFlowListStore.setShowSearchAd(false);
	  carFlowListStore.doTableLoading();
	}

	// 自定义过滤渲染
	getNewColumns = (columns) => {
	  let newColumns = '';
	  newColumns = columns.map((column) => {
	    const newColumn = column;
	    newColumn.render = (text, record, index) => { // 前端元素转义
	      const valueSpan = record[`${newColumn.dataIndex}span`] !== undefined ? record[`${newColumn.dataIndex}span`] : record[newColumn.dataIndex];
	      if (newColumn.dataIndex == 'carNo') {
	        return <div className="wea-url-name" style={{ cursor: 'pointer' }} title={text} onClick={() => { this.carview(record.randomFieldId); }} dangerouslySetInnerHTML={{ __html: valueSpan }} />;
	      }
	      return <div className="wea-url" dangerouslySetInnerHTML={{ __html: valueSpan }} />;
	    };
	    return newColumn;
	  });
	  return columns;
	}
}


export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@djtl24`} msg={props.error ? props.error : '对不起，该页面异常，请联系管理员！'} />,
  { error: '' },
)(CarFlowList);
